<template>
  <ul class="list">
    <li
      class="item"
      v-for="(item, index) of letters"
      @touchstart="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      @click="handleLetterClick"
      :class="{ current: currentIndex === index }"
      :ref="item"
    >
      {{ item }}
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
export default{
    name:'CityAlphabet',
    props:{
      cities:{
        type:Object
      },
      currentIndex:{
        type:Number
      }
    },
    computed:{
      letters(){
        const letters = []
        for (let i in this.cities){
          letters.push(i)
        }
        return letters
      }
    },
    data(){
      return {
        touchStatus:false,
        timer:null,
        startY:0
      }
    },
    updated() {
       this.startY = this.$refs['A'][0].offsetTop
    },
    methods:{
      handleLetterClick(e){
        this.$emit('change',e.target.innerText)
      },
      handleTouchStart(){
        this.touchStatus = true
      },
      handleTouchMove(e){
        if(this.touchStatus){
            if(this.timer){
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                const touchY = e.touches[0].clientY - 79
                const index = Math.floor((touchY - this.startY)/20)
                if(index >=0 && index < this.letters.length){
                  this.$emit('change',this.letters[index])
                }
            },16)
        }
      },
      handleTouchEnd(){
        this.touchStatus = false
      }
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/varibles.styl'

.list
  display flex
  flex-direction column
  justify-content center
  position absolute
  right 0
  top 135px
  width 20px
  .item
    line-height 20px
    text-align center
    color $bgColor
    &.current
      color #ccc
</style>
